<template>
<div>
  <div class="myOrder" style="background: #f5f5f5;position:relative;width: 100vw;height: 100vh;">
    <van-tabs :active="active" @change="onChange" swipeable  :sticky='true'>
      <van-tab title="全部">
        <sawList :data="data" :active="active" :allCount="allCount" :isNone="isNone" @flash="flash" @reload="reload"></sawList>
      </van-tab>
      <van-tab title="待付款">
        <sawList :data="data" :active="active" :allCount="allCount" :isNone="isNone" @reload="reload"></sawList>
      </van-tab>
      <van-tab title="待发货">
        <sawList :data="data" :active="active" :allCount="allCount" :isNone="isNone" @reload="reload"></sawList>
      </van-tab>
      <van-tab title="待收货">
        <sawList :data="data" :active="active" :allCount="allCount" :isNone="isNone" @reload="reload"></sawList>
      </van-tab>
      <van-tab title="待评价">
        <commentList :commentList="commentList" :commentCount="commentCount"></commentList>
      </van-tab>
    </van-tabs>
  </div>
</div>
</template>
<script>
  import sawList from '@/components/orderList/sawList'
  import commentList from '@/components/orderList/commentList'
 import request from '@/actions/request.js'
    export default {
      name: "orderList",
      components:{
        sawList,
        commentList
      },
      data(){
        return{
          active:0,
          //active:this.$route.query.active,
          status:0,
          page:1,
          data:[],
          allCount:'',
          commentList:[],
          commentCount:'',
          isNone:false,
          onClick:false,
        }
      },
      onLoad(){

        this.active = wx.getStorageSync("orderListAct");
       /* let pages = getCurrentPages();
        console.log(pages);
        let prevPage = pages[pages.length-2];
        wx.setStorageSync('routerBack','2');*/
      },
      watch:{
      },
      onShow(){
        this.active = wx.getStorageSync("orderListAct");
        request.commentList("api/user/orderComment","post",{page:this.page},{},true,this);
        request.orderList("api/user/orderList","post",{status:this.active,page:this.page},{},true,this);
      },
      mounted(){
      },
      onUnload: function (){
        let toHome = wx.getStorageSync("fromOrder")
        if (toHome) {
          wx.switchTab({
            url:'../home/main'
          })
          wx.setStorageSync('fromOrder',)
        };
      },
      methods:{
        flash(){
          console.log(1);
        },
        gotoHomePage() {
          let that = this;
          if (that.onClick) {
            return;
          } else {
            that.onClick = true;
          }
          wx.switchTab({url: '../mine/main',})
        },
        onChange(act){
          let index = act.mp.detail.index;
          wx.setStorageSync("orderListAct",index)
          if (index === 4){
            request.commentList("api/user/orderComment","post",{page:this.page},{},true,this);
          }else{
            request.orderList("api/user/orderList","post",{status:index,page:this.page},{},true,this);
          };
        },
      }
    }
</script>

<style scoped lang="scss">
  .van-hairline--top-bottom{
    position:fixed;
    top:0px;
  }
  .contents{
    width: 100vw;
    height: auto;
    background: #fff;
    padding-top: 4vw;
    border-bottom: 4vw solid #f5f5f5;
    .ifBlank{
      width: 35vw;
      height:90vh;
      margin: 0px auto;
      img{
        width: 15vw;
        margin: 0px auto;
        margin-left: 10vw;
      }
      p{
        width: 100%;
        color: #666;
        text-align: center;
      }
    }
    .btn{
      float: right;
      .nOrder{
        border: 1px solid #666;
        color: #666;
      }
      .pay{
        border: 1px solid #ff4c50;
        color: #ff4c50;
      }
      button{
        width:18.67vw;
        height: 8vw;
        line-height: 8vw;
        text-align: center;
        background: #fff;
        border-radius: 4vw;
        margin-right: 4vw;
        margin-top: 3.3vw;
      }
    }
    .sec{
      width: 100vw;
      height:26vw;
      line-height:6.67vw;
      border-bottom: 1px solid #f5f5f5;
      .text{
        float: right;
        padding-top: 3vw;
        width: 73vw;
        .seven{
          width: 32vw;
          height: 4.34vw;
          color: #ff4c50;
          border: 1px solid #ff4c50;
          border-radius: 4vw;
          line-height: 4vw;
          text-align: center;
          margin-top: 4vw;
          font-size: 11px;
        }
        p{
          height: 5vw;
          .types{
            float: right;
            color: #FF4C50;
            font-size: 13px;
            margin-right: 4vw;
          }
        }
        .size{
          font-size: 12px;
          color: #666;
        }
        .name{
          font-size: 13px;
          color: #333;

          .goodsName{
            width: 41vw;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
          }
        }
      }
      img{
        width: 20vw;
        height: 20vw;
        float: left;
        margin-left: 4vw;
        margin-top: 2.67vw;
        border-radius: 3px;
      }
    }

  }
</style>
<style lang="scss">
  .myOrder{
  .van-tabs--line .van-tabs__wrap{
    height: 11vw;
  }
  .van-tabs__content{
    margin-top: 7vw !important;
  }
  .van-tabs--line{
    padding-top: 25px;
  }
  .van-tab--active div, .van-tab--active span{
    color: #FF4C50 !important;
  }
  .van-tabs__wrap--scrollable .van-tab{
    flex:0 0 20% !important;
  }
  }
</style>
